<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script src="js/singleimg/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="js/singleimg/hammer.js" type="text/javascript" charset="utf-8"></script>
<script src="js/singleimg/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="js/singleimg/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
		.formLeft {
			float: left;
        	width: 96px;
        	height: 96px;
        	margin-top: 5px;
        	margin-right: -100%;
		}
        .formRight{
            float: left;
        	width: 100%;
        }
        .formRightContent{
        	margin-left: 101px;
        }
        .bootomCenter{
        	width:100px;
         	position:absolute;
         	bottom:10px;
         	left:50%;
         	margin-left:-50px;
        }
    .input-file{
    display: inline-block;
    position: relative;
    overflow: hidden;
    text-align: center;
    width: 96px;
    background-color: #3c8dbc;
    /*border: solid 1px #ddd;*/
    /*border-radius: 4px;*/
    padding: 5px 10px;
    font-size: 12px;
    font-weight: normal;
    line-height: 18px;
    color:#fff;
    text-decoration: none;
}
.input-file input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    background-color: #fff;
    transform: translate(-300px, 0px) scale(4);
    height: 20px;
    opacity: 0;
    filter: alpha(opacity=0);
 }
</style>
	<div class="cover-wrap" style="display:none;position:absolute;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">	
	<div class="" style="width:auto;height:auto;margin:3px;background-color:#FFFFFF;overflow: hidden;border-radius:2px;">
		<div id="clipArea" style="margin:3px;height: 300px;">
		</div>
		<div class="" style="height:30px;text-align: center;">
			<button id="clipBtn" class="easyui-linkbutton">
			保存头像
			</button>
			<button id="closeClip" class="easyui-linkbutton" onclick="closeClip()">
			取消
			</button>
		</div>
	</div>
	</div>
<div style="padding:10px 10px 10px 10px">
	<form id="userEditForm" class="userForm">
		<div id="view" class="formLeft" style="background-color:#4d4d4d;">
			<div style="width: 96px; height:20px; margin-left: auto; margin-right: auto;margin-top:106px;">
				<a class="input-file input-fileup" href="javascript:;">
     				+ 选择文件<input type="file" name="file" id="file">
				</a>
			</div>
		</div>
		<div class="formRight">
			<div class="formRightContent">
			<table cellpadding="5">
	    	<input name="id" type="hidden"/>
	    	<input id="base64Data" name="base64Data" type="hidden"/>
	    	<input id="headimage" name="headimage" type="hidden"/>
	        <tr>
	            <td>用户名:</td>
	            <td><input class="easyui-textbox" type="text" name="username" data-options="required:true" disabled="disabled" style="width: 280px;"></input></td>
	        </tr>
	        <tr>
	            <td>昵称:</td>
	            <td><input class="easyui-textbox" type="text" name="nikename" data-options="required:true" style="width:280px;"></input></td>
	        </tr>
	        <tr>
	            <td>联系电话:</td>
	            <td><input class="easyui-numberbox" type="text" name="phone" data-options="validType:'length[7,11]',required:true" style="width:280px;"/></td>
	        </tr>
	        <tr>
	            <td>Email:</td>
	            <td><input class="easyui-textbox" type="text" name="email" data-options="validType:'email',required:true" style="width:280px;" /></td>
	        </tr>
	    	</table>
			</div>
		</div>
	</form>
</div>
<a href="javascript:void(0)" class="easyui-linkbutton bootomCenter" onclick="submitForm()">提交</a>
<script src="js/jquery.form.min.js" type="text/javascript"/>
<script type="text/javascript" src="js/customer/user.js"/>
<script type="text/javascript">
	function submitForm(){
		User.updatePatch(function(data){
			// 保存用户信息
			setSessionStorage("nikename", data.nikename);
			// 重新刷新头部信息菜单
			createHeardMenu();
			var userList = $("#userList");
			if(userList){
				userList.datagrid("reload");
			}
		});
	}
	// 关闭图片选择器
	function closeClip(){
		$('.cover-wrap').css("display","none");
	}
	$(function(){
		//把base64位的toDataURL图片转换成blob
         function dataURLtoBlob(dataurl) {  
             var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],  
                     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);  
            while (n--) {  
                 u8arr[n] = bstr.charCodeAt(n);  
            }  
             return new Blob([u8arr], { type: mime });  
        } 
	
		var clipArea = new bjj.PhotoClip("#clipArea", {
			size: [144, 144],// 截取框的宽和高组成的数组。默认值为[260,260]
			outputSize: [48, 48], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
			outputType: "png", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
			file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
			view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
			ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
			loadStart: function() {
				// 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
				$('.cover-wrap').fadeIn();
				console.log("照片读取中");
			},
			loadComplete: function() {
				 // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
				console.log("照片读取完成");
			},
			//loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
			clipFinish: function(dataURL) {
				 // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
				$('.cover-wrap').fadeOut();
				$('#view').css('background-size','100% 100%');
				console.log(dataURL);
				$('#base64Data').val(dataURL);
			}
		});
	});
</script>
